<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style lang="scss">
		@import url(https://fonts.googleapis.com/css?family=Montserrat);

		$colour:hsla(350,100%,25%,1);
		$grey:desaturate($colour,90%);

		body {
		  background:lighten($grey,30%);
		    background-image:
		    linear-gradient(40deg,transparentize($grey,0.95),transparentize($colour,0.95)),

		    linear-gradient(135deg,
		        lighten($grey,18%) 0%,
		        lighten($grey,18%) 10%,
		        lighten($grey,25%) 11%,
		        lighten($grey,25%) 40%,
		        lighten($grey,35%) 41%,
		        lighten($grey,35%) 50%,
		        lighten($grey,18%) 51%,
		        lighten($grey,18%) 60%,
		        lighten($grey,25%) 61%,
		        lighten($grey,25%) 90%,
		        lighten($grey,35%) 91%)
		    ;
		    background-size:7px 7px, 4px 4px;
		    font-family: montserrat;
		}

		html,body {
		  width: 100vw;
		  height: 100vh;
		} 
		h1 {
		  margin: 0 0 15px;
		}
		.modal {
		  background: #eee;
		  display: flex;
		  flex-direction: column;
		  padding: 40px 40px 20px 40px;
		  width: 300px;
		  margin: 10px auto;
		  transform-origin: top center;
		  position: relative;
		}
		.modal-toggle-enter-active,
		.modal-toggle-leave-active {
		  transform: scale(1);
		  transition: transform 0.3s;
		}

		.modal-toggle-enter,
		.modal-toggle-leave-to {
		  transform: scale(0);
		}
		.modal__actions {
		  padding: 13px 26px;
		  border-top: 1px solid #efefef;
		  text-align: center;
		}
		.modal__body {
		  padding: 0 0 15px;
		}
		.modal__close {
		  position: absolute;
		  top: -15px;
		  right: -15px;
		  border-radius: 50%;
		  width: 40px;
		  height: 40px;
		  margin: 0;
		  min-width: 40px;
		}
		.actions {
		  text-align: center;
		}
		button {
		  border: none;
		  background: #123456;
		  color: #FFFFFF;
		  cursor: pointer;
		  padding: 10px;
		  border-radius: 4px;
		  margin: 10px auto 0 auto;
		  display: inline-block;
		  outline: none;
		  min-width: 60px;
		}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
 <div id="app">
 	<div class="actions"> 
 		<button @click="toggleModal('new-item')">添加列表</button> 
 		<button @click="toggleModal('confirm')">删除列表</button> 
 	</div> 
 	<modal ref="new-item"> 
 		<p>添加新的列表</p> 
 		<div slot="actions"> 
 			<button>保存</button> 
 			<button>取消</button> 
 		</div> 
 	</modal> 
 	<modal ref="confirm"> 
 		<p>删除列表？</p> 
 		<div slot="actions"> 
 			<button>删除</button> 
 			<button>取消</button> 
 		</div> 
 	</modal> 
<script type="x-template" id="modal-template"> 
	<transition name="modal-toggle"> 
		<div class="modal" v-show="toggle"> 
			<button class="modal__close" @click="close">X</button> 
			<div class="modal__body"> 
				<h1>Modal</h1> 
				<slot>这是一个Modal，是否需要添加新的内容?</slot> 
			</div> 
			<div class="modal__actions"> 
				<!-- 具名插槽 -->
				<slot name="actions"> 
					<button @click="close">关闭</button> 
				</slot> 
			</div> 
		</div> 
	</transition> 

</script> 
</div>

<script type="text/javascript">
	let Modal = Vue.component('modal', { 
		template: "#modal-template", 
		data() { 
			return { 
				toggle: false 
			} 
		}, 
		methods: { 
			close: function() { 
				this.toggle = false; 
			} 
		} 
	}); 
	let app = new Vue({ 
		el: "#app", 
		methods: { 
			toggleModal(modal) { 
				this.$refs[modal].toggle = !this.$refs[modal].toggle; 
			} 
		} 
	});
</script>

</body>
</html>